<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 100px;height:100px;background: red}
    </style>
</head>
<body>
    <!-- 行内：通过行为触发 -->
    <div id="box" onclick="alert('hello world')"></div>
    <button id="btn">按钮</button>
</body>
<!-- 外部js -->
<!-- <script src="./test.js"></script> -->
<script>

    // 内部：自动触发
    // alert("hello js")


    // 页面加载完成后执行，会覆盖网页内容
    // 支持html标签
    // 转字符
    // document.write("hello document1<br>");
    // document.write("hello document2<br>");
    // document.write("hello document3<br>");
    // document.write("<mark>hello document</mark>");
    // btn.onclick = function(){
    //     document.write("&lt;mark&gt;hello document</mark>");
    // }

    // 打印到控制台
    // 不支持html标签
    // 不会阻塞程序执行
    // 保持数据原有格式
    // 静默打印
    // console.log("hello console")
    // console.log("hello console<br>")
    // console.log("hello console")
    // console.log("hello console")

</script>
</html>